<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>element-ui，对话框</title>
    <link rel="stylesheet" href="../lib/element-ui-index.css">
</head>

<body>
    <div id="app">
        <el-button @click="btn1">点击打开对话框</el-button>
    </div>
</body>
<script src="../lib/vue.min.js"></script>
<script src="../lib/element-ui-index.js"></script>
<script>

    var mypanel = {
        props: ["id", "current", "all"],
        template: `
        <div> <br>
        编号：{{id}} <br>
        进度：{{current}} / {{all}} <br>
        </div>
        `
    }


    var vm = new Vue({
        el: "#app",
        components: {
            "mypanel": mypanel
        },
        data: {
            id: "1",
            current: "2",
            all: "3",
        },
        methods: {
            click2: function() {
                console.log("click2")
            },
            btn1: function () {

                // 这是一个很复杂的VNode
                const h = this.$createElement;
                this.$msgbox({
                    title: '消息',
                    message: h('p', null, [
                        h('span', null, '内容可以是 '),
                        h('i', { style: 'color: teal' }, 'VNode'),
                        h('el-button', 
                        {
                            on: {
                                click: this.click2
                            }
                        }, "btn"),
                        h('mypanel', {
                            props: {
                                id: this.id,
                                current: this.current,
                                all: this.all
                            }
                        })
                    ]),
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            setTimeout(() => {
                                done();
                                setTimeout(() => {
                                    instance.confirmButtonLoading = false;
                                }, 300);
                            }, 3000);
                        } else {
                            done();
                        }
                    }
                }).then(action => {
                    this.$message({
                        type: 'info',
                        message: 'action: ' + action
                    });
                });
            }
        },
    })
</script>

</html>